<template>
    <div class="hourmain">
        <div class="hourbar" >
            <el-form :inline="true" :model="formDate" class="demo-form-inline">
                <el-form-item label="开始时间">
                    <el-date-picker v-model="formDate.beginDate" type="date" size="mini" :picker-options="pickerBeginDate" placeholder="选择开始日期" @change="getStartime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker v-model="formDate.endDate" type="date" size="mini" :picker-options="pickerBeginDate" placeholder="选择结束日期" @change="getStartime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click.prevent.stop="getbarEchar" size="mini" >查询</el-button>
                </el-form-item>                
            </el-form>
            <h5>区域/课时</h5>
            <div id="chartColumn" style="width:100%; height:500px;"></div>
        </div>
        <div class="hourgrow">
            <div class="housun">
                <p>课时总数：<span>{{ lists.hourSum }}</span>节</p>
                <p>主讲授课时长：<span>{{ lists.mainDuration }}</span>h (小时）</p>
                <p>上月同比时间总数：<span>{{ lists.growthTimeSum }}</span>节</p>
                <p>上月同比时间主讲时长：<span>{{ lists.growthMainDuration }}</span>h (小时）</p>     
            </div>
            <div id="chartCo" style="width:100%; height:480px;"></div>
        </div>       
        
        
    </div>
</template>

<script>
    import { option } from '@/config/barx'
    import { optiony } from '@/config/bary' 
    import { barEchar, growthEchar } from '@/api/echarts'    
    import echarts from 'echarts'    

    export default {
        data() {
            return {
                chartColumn: null,
                xax:[],
                serie:[],
                lists:[],
                formDate: {                    
                    beginDate:'',
                    endDate:''  
                },
                 pickerBeginDate: {
                    disabledDate: time => {
                        if (this.formDate.endDate) {
                            return (
                                time.getTime() > new Date(this.formDate.endDate).getTime()
                            )
                        } else {
                            // 不能大于当前日期
                            return time.getTime() > Date.now()
                        }
                    }
                },
                /*pickerEndDate: {
                    disabledDate: time => {
                        if(this.formDate.beginDate) {
                            return (
                                time.getTime() > Date.now() ||
                                time.getTime() < new Date(this.formDate.beginDate).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
                            )
                        } else {
                            return time.getTime() < Date.now()
                        }
                    }
                }*/

            }
        },        
        methods: {
            getStartime(){
                let sta = this.formDate.beginDate,
                    end = this.formDate.endDate;
                if (sta  >= end ) {
                    return this.formDate.endDate  = ''
                }
               
            },
            getGrowthEchar(){    
                let params = { ...this.formDate }
                growthEchar(params).then((r) => {
                    // console.log(r.data)                
                    this.lists = r.data                   
                })
            },
            getbarEchar(){
                this.chartColumn = echarts.init(document.getElementById('chartColumn'));		  	
                this.chartColumn.setOption(option,true)
                this.chartCo = echarts.init(document.getElementById('chartCo'));		  	
                this.chartCo.setOption(optiony,true)                  
                        
                let params = { ...this.formDate }        
                barEchar(params).then((res) => {
                    // console.log(res.data.tableList) 
                    let lists = res.data.tableList 
                    const xax = [];
                    const serie = []
                    for(var i=0;i<lists.length;i++) {                        
                        xax.push( lists[i].areaName )
                        serie.push( lists[i].lessonNum ) 
                    }
                    /**
                     * 以下是柱子图形
                     */                                        
                    this.chartColumn.setOption({ 
                        title: { text: "上课节数 /节" }, 
                        xAxis: {
                            data: xax
                        },                       
                        series: [{ 
                            type: 'bar',
                            data: serie
                        }]
                    })                  
                    this.chartCo.setOption({                        
                        yAxis: {
                            data: xax
                        },
                        series: [{ 
                            type: 'bar',
                            data: serie
                        }]
                    })
                })
                this.getGrowthEchar()              
            }
        },
        mounted () {
            
                this.getbarEchar();
                this.getGrowthEchar()
                                
        }        
    }
</script>

<style scoped lang="scss">
.hourmain{
    height:600px;    
    margin-bottom:20px;    
    .hourbar{                
        width:48%;
        height:600px;
        margin-right:1%;
        display: block;
        float: left;
    }
    .hourgrow{
        display:block;
        float: left;        
        width:48%;
        height:600px;
        .housun{
            margin:20px 0 0 30px;
            p{
                margin:10px;
                font-size: 16px;                
            }
            span{            
                display:inline-block;
                margin:0 10px;
                font-size: 18px;
                color:red
            }
        }
    }
}
</style>
